<template>
  <a-card title="第三方账号" bordered class="gradient-card">
    <div v-for="item in modeList" :key="item.title">
      <div class="item">
        <div class="icon-wrapper"><GiSvgIcon :name="item.icon" :size="26" /></div>
        <div class="info">
          <div class="info-top">
            <span class="label">{{ item.title }}</span>
            <span class="bind">
              <icon-check-circle-fill v-if="item.status" :size="14" class="success" />
              <icon-exclamation-circle-fill v-else :size="14" class="warning" />
              <span style="font-size: 12px" :class="item.status ? 'success' : 'warning'">{{
                item.status ? '已绑定' : '未绑定'
              }}</span>
            </span>
          </div>
          <div class="info-desc">
            <span class="value">{{ item.value }}</span>
            {{ item.subtitle }}
          </div>
        </div>
        <div class="btn-wrapper">
          <a-button
            v-if="item.jumpMode === 'modal'"
            class="btn"
            :type="item.status ? 'secondary' : 'primary'"
            @click="onUpdate(item.type)"
          >
            {{ item.status ? '修改' : '绑定' }}
          </a-button>
          <a-button
            v-else-if="item.jumpMode === 'link'"
            class="btn"
            :type="item.status ? 'secondary' : 'primary'"
            @click="onBinding(item.type, item.status)"
          >
            {{ item.status ? '解绑' : '绑定' }}
          </a-button>
        </div>
      </div>
    </div>
  </a-card>
  <VerifyModal ref="VerifyModalRef" @save-success="reload" />
</template>

<script setup lang="ts">
import { Message } from '@arco-design/web-vue'
import type { ModeItem } from '../type'
import VerifyModal from './components/VerifyModal.vue'
import { listThirdparty, thirdpartyAuth, unbindThirdparty } from '@/apis'

const thirdpartyList = ref<any>([])
const modeList = ref<ModeItem[]>([])

// 初始化数据
const initData = () => {
  listThirdparty().then((res) => {
    thirdpartyList.value = res.data.map((el) => el.source)
    modeList.value = [
      {
        title: '绑定 Gitee',
        icon: 'gitee',
        subtitle: `${thirdpartyList.value.includes('GITEE') ? '' : '绑定后，'}可通过 Gitee 进行登录`,
        jumpMode: 'link',
        type: 'gitee',
        status: thirdpartyList.value.includes('GITEE')
      },
      {
        title: '绑定 GitHub',
        icon: 'github',
        subtitle: `${thirdpartyList.value.includes('GITHUB') ? '' : '绑定后，'}可通过 GitHub 进行登录`,
        type: 'github',
        jumpMode: 'link',
        status: thirdpartyList.value.includes('GITHUB')
      }
    ]
  })
}

// 绑定
const onBinding = (type: string, status: boolean) => {
  if (!status) {
    thirdpartyAuth(type).then((res) => {
      window.open(res.data.authorizeUrl, '_self')
    })
  } else {
    unbindThirdparty(type).then(() => {
      initData()
      Message.success('解绑成功')
    })
  }
}

const VerifyModalRef = ref<InstanceType<typeof VerifyModal>>()
// 修改
const onUpdate = (type: string) => {
  VerifyModalRef.value?.open(type)
}

const reload = () => {
  location.reload()
}

onMounted(() => {
  initData()
})
</script>

<style scoped lang="scss"></style>
